/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/



import React, { useEffect, useState } from 'react';
import { getAbilityDetail } from '@/services/ability';
import BaseInfoDetail from './components/BaseInfoDetail';
import ArgTable from './components/ArgTable';
import SOATable from './components/SOATable';
import styles from './index.less';
import { Drawer } from 'antd';


const AbilityNDetail: React.FC<any> = (props: any) => {
    const { query, setShowDetail, showDetail } = props
    const [querySys, setQuerySys] = useState<any>({ id: null })

    const [abilityInfo, setAbilityInfo] = useState<any | null>(null);

    const [argData, setArgData] = useState(null);

    const [soaData, setSoaData] = useState([]);

    const getDetailFc = async (Id = (query?.id as string) || '') => {
        const res = await getAbilityDetail({ skillVersionId: Id })
        const { args, steps, ...baseInfo } = res.data
        setQuerySys({ id: Id, skillName: baseInfo.name })
        setAbilityInfo(baseInfo)
        setArgData(args)
        setSoaData(steps)
    }

    useEffect(() => {
        if (query.id) {
            getDetailFc();
        }
    }, [query.id])

    return (
        <Drawer
            key={'setShowDetail'}
            title={querySys?.skillName || query?.skillName}
            placement="right"
            width='75%'
            onClose={() => {
                setShowDetail(false);
            }}
            visible={showDetail}
        >
            <div style={{ background: '#fff', padding: '20px' }}>
                <div style={{ marginBottom: '84px' }}>
                    <div className={styles.title}>基本信息</div>
                    <BaseInfoDetail info={abilityInfo} />
                </div>
                <div>
                    <div className={styles.title}>能力配置</div>
                    <div>
                        <div className={styles.subTitle}>参数列表</div>
                        <ArgTable data={argData} />
                    </div>
                    <div>
                        <div className={styles.title2}>Service SOA服务类</div>
                        <SOATable SOAData={soaData} />
                    </div>
                </div>
            </div>
        </Drawer>
    )
}

export default AbilityNDetail;